<template>
	<div class="home">
		<div v-if="flag === 0" class="mb-[24px] flex items-center <sm:flex-col">
			<l-statistical
				class="!w-[538px] !rounded-[12px] md:mr-[24px] !<sm:w-full <sm:mb-[24px]"
				:left-value="statistics.userNum"
				:right-value="statistics.todayUserNum"
				left-name="用户总数"
				right-name="今日新增"
			/>
			<l-statistical
				class="!w-[538px] !rounded-[12px] md:mr-[24px] !<sm:w-full <sm:mb-[24px]"
				:left-value="statistics.orderRevenue"
				:right-value="statistics.todayRevenue"
				left-name="订单收入"
				right-name="今日新增"
			/>
			<l-statistical class="!w-[538px] !rounded-[12px] !<sm:w-full" :left-value="statistics.orderNum" :right-value="statistics.todayOrderNum" left-name="订单总数" right-name="今日新增" />
		</div>
		<div v-if="flag !== 0" class="mb-[24px] flex items-center <sm:flex-col">
			<l-statistical
				class="!w-[538px] !rounded-[12px] md:mr-[24px] !<sm:w-full <sm:mb-[24px]"
				:left-value="statistics.orderNum"
				:right-value="statistics.todayOrderNum"
				left-name="订单总数"
				right-name="今日新增"
			/>
			<l-statistical
				class="!w-[538px] !rounded-[12px] md:mr-[24px] !<sm:w-full <sm:mb-[24px]"
				:left-value="statistics.orderRevenue"
				:right-value="statistics.todayRevenue"
				left-name="订单收入"
				right-name="今日新增"
			/>
			<l-statistical
				class="!w-[538px] !rounded-[12px] md:mr-[24px] !<sm:w-full <sm:mb-[24px]"
				:left-value="statistics.orderOut"
				:right-value="statistics.todayOut"
				left-name="订单支出"
				right-name="今日新增"
			/>
			<l-statistical
				class="!w-[538px] !rounded-[12px] md:mr-[24px] !<sm:w-full <sm:mb-[24px]"
				:left-value="statistics.goodsNum"
				:right-value="statistics.todayGoodsNum"
				left-name="上架商品数量"
				right-name="今日新增"
			/>
			<l-statistical class="!w-[538px] !rounded-[12px]" :left-value="statistics.waitGoodsNum" :right-value="statistics.waitTodayGoodsNum" left-name="待通过数量" right-name="今日新增" />
		</div>
		<el-button icon="el-icon-download" type="primary" @click="handleExport">有买有卖统计表导出</el-button>
		<div class="mb-[24px]">
			<Chart />
		</div>
		<el-row v-if="flag === 0" :gutter="10" class="home__table">
			<el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7" class="<sm:mb-[20px]">
				<LatestUsers class="h-[430px]" />
			</el-col>
			<el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7" class="<sm:mb-[20px]">
				<LaterShop class="h-[430px]" />
			</el-col>
			<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
				<LaterOrder class="h-[430px]" />
			</el-col>
		</el-row>

		<el-row v-if="flag !== 0" :gutter="20" class="home__table">
			<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="<sm:mb-[20px]">
				<LaterShop class="h-[430px]" />
			</el-col>
			<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
				<LaterOrder class="h-[430px]" />
			</el-col>
		</el-row>
	</div>
</template>

<script>
import Chart from './components/Chart';
import LatestUsers from './components/LatestUsers';
import LaterShop from './components/LaterShop';
import LaterOrder from './components/LaterOrder';
import { exportTotal } from '../../api/mall/order';
import { download } from '@/utils/tencreat';
export default {
	name: 'Home',
	components: {
		LaterOrder,
		LaterShop,
		LatestUsers,
		Chart,
	},
	data() {
		return {
			statistics: {
				orderRevenue: 0, //订单收入
				todayRevenue: 0, //今日订单收入
				orderNum: 0, //订单数量
				todayOrderNum: 0, //今日订单数量
				userNum: 0, //用户数量
				todayUserNum: 0, //今日用户数量
				todayOut: 0, //今日订单支出
				orderOut: 0, //订单支出
				todayGoodsNum: 0, //今日上架商品数
				goodsNum: 0, //上架商品数
				waitGoodsNum: 0, //待通过商品数
				waitTodayGoodsNum: 0, //今日待通过商品数
				totalOrderRevenue: 0, //订单总收入
				todayOrderRevenue: 0, //今日订单总收入
			},
			flag: 0,
			filename: '',
		};
	},
	created() {
		this.flag = this.$store.getters.roles.findIndex((item) => item === 'admin' || item === 'dev');
		if (this.flag <= -1) {
			this.userId = this.$store.getters.userId;
		}
		this.getStatistics();
	},
	methods: {
		/** 导出按钮操作 */
		handleExport() {
			this.download3('/mall/order/exportTotal', {}, `有买有卖统计表${new Date().getTime()}.xlsx`);
			// const queryParams = this.queryParams;
			// this.filename = 'financial_management.xlsx';
			// this.$confirm('是否确认导出有买有卖统计表?', '警告', {
			// 	confirmButtonText: '确定',
			// 	cancelButtonText: '取消',
			// 	type: 'warning',
			// }).then(function () {
			// 	this.download3('/mall/order/exportTotal', {}, `财务列表${new Date().getTime()}.xlsx`);
			// 	// return exportTotal();
			// });
			// .then((response) => {
			//   console.log(response)
			//   console.log(response.msg)
			// 	// this.download(response.msg);
			// });
		},
		getStatistics() {
			this.$request.post('/mall/order/getIndexNum', { userId: this.userId }).then((res) => {
				this.statistics = res.data;
			});
		},
	},
};
</script>

<style scoped lang="scss">
.home {
	padding: 24px;
	::v-deep {
		.el-table th.is-leaf {
			border-bottom: none;
			background-color: #f8f9fb;
		}
		.el-table .el-table__cell {
			height: 56px;
			border: none;
		}
		.el-table .el-table__header-wrapper th,
		.el-table .el-table__fixed-header-wrapper th {
			height: 36px;
		}
		&__home {
			.el-card__body {
				padding: 20px 24px !important;
			}
		}
	}
}
</style>
